{"componentChunkName":"component---src-templates-post-tsx","path":"/javascript-study_1/","result":{"data":{"markdownRemark":{"html":"<p>자바스크립트 프로그램은 unicode 문자 집합을 사용해 작성된다. unicode는 ASCII나 Latin-1의 상위 집합이고 지구상에서 사용되는 대부분의 문자를 표현할 수 있다.</p>\n<p>자바스크립트는 대소문자를 구분하는 언어다. 다시 말해 키워드, 변수, 함수 이름, 식별자들은 모두 항상 대소문자를 구분해 입력해야 한다. 그러나 HTML은 대소문자를 구별하지 않는다. HTML이 클라이언트 측 자바스크립트와 밀접한 연관이 있기 떄문에 이 점이 약한 혼동될 수 있다. 많은 클라이언트 측 자바스크립트 객체와 프로퍼티 이름은 HTML 태그나 태그 속성(attribute)의 이름과 동일하다. 그런데 HTML에서는 태그나 속성 이름을 대소문자 구분 없이 입력해도 되지만, 자바스크립트에서는 모두 소문자로 입력해야 한다.</p>\n<p>2.1.2 공백, 줄바꿈, 제어 문자\n자바스크립트는 프로그램 코드 내의 토큰(토큰이란 프로그래밍 언어에서 더 이상 나눌수 없는 최소한의 단위이며, 키워드나 변수의 이름, 숫자 등이 여기에 해당한다.) 들 사이에 있는 공백들을 무시한다.</p>\n<p>2.2 주석</p>\n<p>자바스크ㅂ트는 두 가지 형태의 주석을 지원한다. //와 줄 끝 사이에 있는 텍스트는 모두 주석으로 취급되어 자바스크립트에 의해 무시된다. /_와 _/ 사이의 텍스트도 모두 주석으로 취급된다. 이때, 주석은 여러 줄에 걸쳐 나타날수 있지만 서로 중첩될 수 없다. 다음의 코드는 모두 올바른 자바스크립트 주석이다.</p>\n<p>// 한 줄짜리 주석\n/_ 이것도 주석 _/ // 또 다른 주석/*</p>\n<ul>\n<li>또 다른 주석</li>\n<li>\n<p>여러 줄에 걸쳐 있다. */</p>\n<p>2.3 리터럴</p>\n</li>\n</ul>\n<p>리터럴(literal)은 프로그램에 직접 나타나는 데이터 값이다. 다음의 코드는 모두 리터럴이다.\n12 // 숫자 12\n1.2 // 숫자 1.2\n\"hello world\" // 문자열\n'Hi' // 다른 문자열\ntrue // 불리언 값\nfalse // 다른 불리언 값\n/javascript/hi // '정규 표현식' 리터럴(패턴 매칭용)\nnull // 객체가 존재하지 않음</p>\n<p>배열이나 객체 리터럴을 위한 좀 더 복잡한 표션식도 지원한다. 예를 들어, 다음과 같다.\n{ x:1, y:2 } // 객체 초기자\n[1,2,3,4,5] // 배열 초기자</p>\n<p>2.4 식별자와 예약어</p>\n<p>식별자(identifier)는 간단히 말해 이름이다. 자바스크립트에서 식별자는 변수나 함수에 이름을 붙이거나 코드 내 반복문에서 쓸 레이블을 붙이는 데 사용된다. 자바스크립트 식별자의 시작은 알파벳, 밑줄(_) 혹은 달러($) 표시여야 한다. 이어지는 문자들은 알파벳이나 숫자, 밑줄 혹은 달러 표시여야 한다(식별자의 첫 글자로 숫자를 허용하지 않는 이유는 자바스크립트가 숫자와 식별자를 쉽게 구별하기 위함이다). 다음은 모두 올바른 식별자다.</p>\n<p>i\nmy<em>variable</em>name\nv13\n_dummy\n$str</p>\n<p>다른 언어와 마찬가지로, 자바스크립트에도 언어 내부적으로 사용할 용도로 예약된 식별자들이 있다. 이러한 '예약어(reserved keyword)'는 식별자(변수명, 함수명, 레이블)로 사용할 수 없다.</p>\n<p>2.4.1 예약어</p>\n<p>자바스크립트는 몇 가지 식별자를 미리 선점하고 있다. 다음은 프로그램 내에서 식별자로 사용할 수 없는 단어들이다.</p>\n<p>break delete function return typeof\ncase do if switch var\ncatct else in this void\ncontinue false instanceof throw while\ndebugger finally new true with\ndefault for null try\nclass const enum export extends import super</p>\n<p>또한, 보통 자바스크립트 코드에서는 식별자로 사용할 수 있지만, 엄격모드 (strict mode)에서는 사용할 수 없는 단어도 있다.</p>\n<p>implements let priviate public yield interface package protected static</p>\n<p>엄격모드에서는 아래의 식별자도 사용이 제한된다. 이 식별자들은 완전히 예약어는 아니지만 변수나 함수 혹은 매개변수 이름으로 사용할 수 없다.</p>\n<p>arguments eval</p>\n<p>자바스크립트는 다음과 같이 몇 가지 전역 변수와 함수를 정의하고 있다. 이 단어들은 프로그램 내에서 변수나 함수 이름으로 사용해서는 안 된다.</p>\n<p>arguments encodeURI infinity number regexp\nArray encodeURIComponent isFinite Object String\nBoolean Error isNaN parseFloat SyntaxError\nDate eval JSON parseInt TypeError\ndecodeURI EvalError Math RangeError undefined\ndecodeURIComponent function NaN ReferenceError URIError</p>\n<p>자바스크립트에서는 정의된 전역 변수와 전역 함수가 구현체마다 다를 수 있고, 자바스크립트 내장 방식(클리어이언트 측, 서버 측 등)에 따라 전역 프로퍼티 목록도 다를 수 있다.</p>\n<p>2.5 선택적인 세미콜론 사용</p>\n<p>다른 프로그래밍 언어와 마찬가지로 자바스크립트에서도 문장을 구분하기 위해 세미콜론을 사용한다. 이 점은 코드를 좀 더 의미 있게 만드는 측면에서 볼 때 중요하다. 구분자가 없으면 한 문장의 끝에 다음 문장의 시작이 올수 있고, 그다음 문장도 마찬가지다. 자바스크립트에서는 여러 문장이 서로 다른 줄에 나타나는 경우 세미콜론을 생략할 수 있다( 또한 프로그램의 끝이나 다음 토큰이 } 일 경우에도 세미콜론을 생략할 수 있다).\n어떤 스타일을 선택하든 자바스크립트에서 세미콜론이 필수가 아닌 몇 가지 경우에 대해 자세히 이해하고 있어야 한다. 다음 코드를 살펴보자. 두 문장이 각각 다른 줄에 작성되어 있으므로, 첫 행의 세미콜론은 생략할 수 있다.</p>\n<p>a = 3;\nb = 4;</p>\n<p>그러나 코드가 다음과 같이 작성된 경우에는 첫 번째 세미콜론이 반드시 필요하다.</p>\n<p>a = 3; b = 4;</p>\n<p>자바스크립트가 항상 모든 줄바꿈을 세미콜론으로 해석하는 것은 아니다. 일반적으로 세미콜론 없이 코드를 해석할 수 없는 경우에만 줄바꿈을 세미콜론으로 해석한다. 더 형식적으로 말하자면 자바스크립트는 다음 줄에 나오는 공백 아닌 첫 문자를 현재 문장과 이어서 해석 할 수 없을 경우에만 줄바꿈을 세미콜론으로 취급한다. 다음 코드를 살펴보자.</p>\n<p>var a\na\n=\n3\nconsole.log(a)</p>\n<p>자바스크립트는 이 코드를 다음과 같이 해석한다.</p>\n<p>var a ; a = 3; console.log(a);</p>\n<p>자바스크립트는 첫 번째 줄바꿈을 세미콜론으로 취급하는데, 이는 세미콜론 없이 var a a 코드를 해석할 수 없기 때문이다. 두 번째 a는 그 자체로 실행문 a;이 될 수 있지만, 좀 더 긴 문장인 a =3; 으로 해석할 수 있기 떄문에 두 번째 줄바꿈을 세미콜론으로 취급하지 않는다. 이러한 문장 종료 규칙은 상황에 따라 일부 의도하지 않는 결과를 초래할 수 있다. 다음의 코드는 두 가지 별개의 문장을 작성한 것처럼 보인다.</p>\n<p>var y = x + f\n(a+b).toString()</p>\n<p>하지만 두 번째 줄의 괄호가 첫 줄의 함수 f를 호출하는 것으로 해석될 수 있기 때문에 자바스크립트는 이 코드를 이렇게 해석한다.</p>\n<p>var y = x + f(a+b).toString();</p>\n<p>이는 십중팔구 코드의 저자가 의도한 해석이 아닐 가능성이 크다. 이 경우에 두개의 별개 문장으로 작동하게 하려면 명시적으로 세미콜론을 사용해야 한다. 일반적으로, 문장이 (, {, /, +, -로 시작하면 자바스크립트 인터프리터는 해당 문장을 이전 문장에 이어서 해석한다. 문장이 /나 +, -로 시작하는 경우는 극히 드물지만, (나 [로 시작하는 문장은 최소한 자바스크립트 프로그래밍에서는 자주 볼 수 있다. 일부 프로그래머들은 문장의 시작 부분에 방어적인 세미콜론을 넣기도 한다. 이렇게 문장을 작성할 경우, 바로 전 문장의 끝에 세미콜론을 빼먹었어도 항상 그 다음 문장은 올바로 해석된다.</p>\n<p>var x = 0 // 세미콜론이 생략됐다.</p>\n<p>;[x, x+1, x+2].forEach(console.log) //문장 앞에 넣은 방어적인 세미콜론이 이 문장을 위의 문장과 구분되게\n해준다.</p>\n<p>지금까지 자바스크립트에서 줄바꿈을 세미콜론으로 해석하는 일반적인 규칙에 대해 살펴봤다. 다음 줄을 첫 줄의 문장과 이어서 하나로 처리할 수 없는 경우에만 줄바꿈을 세미콜론으로 해석한다는 일반 규칙에는 두 가지 예외가 있다. 첫번째 예외는 return, break, continue문을 사용했을 경우다. 만약 줄 바꿈이 return, break, continue 문 바로 다음에 올 경우(줄바꿈 문자 이전까지 어떠한 토큰도 사용하지 않았을 경우)에 자바스크립트는 줄바꿈을 세미콜론으로 해석한다. 예를 들어, 다음과 같은 예제를 살펴보자.</p>\n<p>return\ntrue;</p>\n<p>자바스크립트는 여러분이 다음의 코드를 작성하려 했다고 간주한다.</p>\n<p>return; true;</p>\n<p>하지만 여러분이 원했던 코드는 아마도 다음과 같을 것이다.</p>\n<p>return true;</p>\n<p>여기서 알아야 할 점은 return, break, continue와 다음에 오는 키워드 사이에 줄바꿈을 하지 말아야 한다는 것이다. 만약에 줄바꿈을 할 경우, 좀처럼 디버깅하기 힘들고 예상치 못한 경우로 프로그램이 비정상적으로 종료될 수도 있다. 두 번째 예외는 ++나 -- 연산자가 포함된 경우다. 이러한 연산자는 피연산자가 전에 오면 전치(prefix) 연산자가 되고, 피연산자가 다음에 올 경우 후치(postfix) 연산자가 된다. 만약 이러한 연산자들을 후치 연산자로 사용할 경우에는 반드시 연산자가 적용되는 표현식과 동일한 줄에 나타나야 한다. 이렇지 않으면, 줄바꿈은 무조건 세미콜론으로 해석되고 ++나 --는 줄바꿈 다음 피연산자의 전치 연산자로 해석될 것이다. 예를 들어, 아래의 코드를 살펴보자.</p>\n<p>x\n++\ny</p>\n<p>위 코드는 x++; y가 아니라 x; ++y로 해석된다.</p>","excerpt":"자바스크립트 프로그램은 unicode 문자 집합을 사용해 작성된다. unicode는 ASCII나 Latin-1의 상위 집합이고 지구상에서 사용되는 대부분의 문자를 표현할 수 있다. 자바스크립트는 대소문자를 구분하는 언어다. 다시 말해 키워드, 변수,…","tableOfContents":"","fields":{"slug":"/javascript-study_1/"},"frontmatter":{"title":"javascript 어휘구조","date":"Sep 28, 2021","tags":["javascript"],"keywords":["Dev.seungwon Jang","seungwon Jang"],"update":"Sep 28, 2021"}}},"pageContext":{"slug":"/javascript-study_1/","series":[{"slug":"/javascript-study_1/","title":"javascript 어휘구조","num":1},{"slug":"/javascript-study_2/","title":"javascript 타입 값 변수","num":2},{"slug":"/javascript-study_3/","title":"javascript 표현식과 연산자","num":3}],"lastmod":"2021-09-28"}},"staticQueryHashes":["2027115977","694178885"]}